import React, { useState, useRef, useImperativeHandle, forwardRef } from "react";
import { Button } from "antd";

const FnChildrenComponent = (props: any, ref: ((instance: unknown) => void) | React.RefObject<unknown> | null | undefined) => {
  const inputEl = useRef(null);

  useImperativeHandle(ref, () => ({
    add: () => {
      handleAdd()
    }
  }));

  const [count, setCount] = useState(1);
  const handleAdd = () => setCount(count + 1);
  return (
    <div ref={inputEl}>
      <h1>{count}</h1>
      <Button onClick={handleAdd}>加1</Button>
    </div>
  )
}

export default forwardRef(FnChildrenComponent);